<script setup>
import Footer from './components/Footer.vue'
</script>

<template>
  <!-- 导航栏 -->
  <nav class="nav-bar">
    <div class="nav-content">
      <div class="nav-logo">
        <h2>山海守门人</h2>
      </div>
      <div class="nav-menu">
        <a href="#">首页</a>
        <a href="#">自媒体</a>
        <a href="#">产品</a>
        <a href="#">项目</a>
        <a href="#">照片</a>
      </div>
    </div>
  </nav>

  <div class="page-content">
    <router-view />
  </div>

  <Footer />
</template>

<style scoped>
.nav-bar {
  background: #1a1a1a;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100vw;

  .nav-content {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nav-logo h2 {
      color: #fff;
      margin: 0;
      font-size: 1.5em;
    }

    .nav-menu {
      display: flex;
      gap: 30px;

      a {
        color: #fff;
        text-decoration: none;
        font-size: 1.1em;
        transition: color 0.3s;

        &:hover {
          color: #845ec2;
        }
      }
    }
  }
}

.page-content {
  max-width: 100vw;
  margin: 0 auto;
}
</style>
